<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function () {  
    $("#checkAll").bind("click", function () {  
    $("[name=chkItem]:checkbox").prop("checked", this.checked);  
    });  

$("input[name='chkItem']").click(function() {  
    var $subs = $("input[name='chkItem']"); 
    console.log('%O',"test:--->"+$subs.length);
	$("#checkAll").prop("checked",$subs.length == $subs.filter(":checked").length ? true : false);  
	/*
	使用prop()给id为checkAll的复选框的属性‘checked’赋值，
	条件：使用选择器判断选中的长度与name为‘chkItem’的长度比较，相等为true，否则为false
	*/
});  
});
</script>
<body>
	<div>  
        CheckAll<input id="checkAll" type="checkbox" value="CheckAll" />  
    </div>  
    <div>  
    <input name="chkItem" type="checkbox" value="Box1" />Box1  
    <input name="chkItem" type="checkbox" value="Box2" />Box2  
    <input name="chkItem" type="checkbox" value="Box3" />Box3  
    <input name="chkItem" type="checkbox" value="Box4" />Box4  
    <input name="chkItem" type="checkbox" value="Box5" />Box5  
    <input name="chkItem" type="checkbox" value="Box6" />Box6  
    </div>  
</body>
</html>